<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框属性</title>
		<style>
			/*CSS3基础语法：边框属性  */
			div{
				/* border边框属性 :宽度 样式 颜色*/
				border: 1px solid red;/* 生成1px实线红色的边框 */
				/* div设置宽高 */
				height:200px;
				width:200px;
				/* border边框属性【复合属性】
				   CSS定义效果     属性：属性值 属性值 属性值 属性值；
				   属性值理解为子属性，作为主属性
				   语法：属性-属性值  主属性
				   border-width边框宽度属性    属性值:数值px
				   border-style边框样式属性    属性值：solid实线
				                                      dashed虚线
													  double双线
													  dotted点线
			       border-color边框颜色属性
				 */
				border-width:10px;
				border-style:dotted;
				border-color:yellow;
				/* 
				边框四个方向:border-方向-子属性【left/right/top/bottom】
				需求：左边边框宽度设置30px
				    右边框设置为黑色
					上边框设置为双线
					下边框设置为虚线
				 */
				border-left-width:30px;
				border-right-color:black;
				border-top-style:double;
				border-style-bottom: dashed;
				border: 1px solid red;
				/* 画圆 边框倒角属性 border-radius：属性值*/
				border-radius:200px;/* 宽高与倒角：数值一致:圆 */
				/* 顺时针： 左上，右上，右下，左下*/
				border-radius:0px 200px;
				/* 顺时针：左上+右下，右上+左下 */
				border-radius:10px 0px 200px;
				/* 顺时针：左上，右上+左下，右下 */
				border-radius:10px 50px 100px 150px;
					/* 顺时针：左上，右上右下，左下 */
					/* 需求：左下角设置为300px */
					/* border-方向-倒角方向-radius */
					border-bottom-left-radius:300px;
				}
				
		</style>
	</head>
	<body>
		<!-- html5文本元素群 分区元素span,div 
		div元素：页面空间区域，有宽没高
		-->
		<div></div>
	</body>
</html>